<template>

    <div>
        <div v-if="isWrite">
            今天已经写了日记
        </div>
        <div class="block" v-else>
            <el-date-picker
                    v-model="todayDate"
                    type="date"
                    :clearable="false"
                    :editable="false"
                    readonly>
            </el-date-picker>
            <span style="margin-left: 50px;color: #B3C0D1;font-size: small" v-if="lastRecordTime">今天最后一次更新日记时间: {{lastRecordTime.split(" ")[1]}}</span>
            <span style="margin-left: 50px;color: #B3C0D1;font-size: small" v-else>今天还没有更新过日记哦</span>
            <el-input style="margin-top: 20px;font-size: large"
                      placeholder="标题"
                      type="text"
                      v-model="title"
                      clearable>
            </el-input>
            <el-input style="margin-top: 30px;font-size: xx-large;padding-bottom: 10px"
                      type="textarea"
                      :autosize="{ minRows: 10, maxRows: 10}"
                      placeholder="请输入内容"
                      id="textarea"
                      v-model="content">
            </el-input>

            <!--表情-->
            <div style="height: 35px">
                <el-popover
                        style="float: right"
                        placement="top-start"
                        width="400"
                        trigger="hover"
                        class="emoBox">
                    <div class="emotionList">
                        <a
                                href="javascript:void(0);"
                                @click="getEmo(index)"
                                v-for="(item, index) in faceList"
                                :key="index"
                                class="emotionItem"
                        >{{ item }}</a>
                    </div>
                    <el-button
                            class="emotionSelect"
                            icon="el-icon-cold-drink"
                            slot="reference"
                            size="small"
                            type="success"
                    ></el-button>
                </el-popover>
            </div>


            <!--更新日记按钮-->
            <div style="text-align: center">
                <el-button type="primary" @click="updateDiary">更新日记</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    // import Emoji from "./Emoji";
    // const appData = require("@/utils/emoji.json");
    const appData = require("emoji.json/emoji.json");
    export default {
        name: "WriteDiary",
        props: {
            id: String,
            tokenId: String
        },
        components:{
            // Emoji
        },
        data() {
            return {
                faceList: [], //表情列表
                isWrite: false,
                todayDate: Date.now(),
                title: '',
                content: '',
                diaryId: null,
                lastRecordTime: ''
            }
        },
        methods: {
            getEmo(index) {
                var textArea = document.getElementById("textarea");
                function changeSelectedText(obj, str) {
                    if (window.getSelection) {
                        // 非IE浏览器
                        textArea.setRangeText(str);
                        // 在未选中文本的情况下，重新设置光标位置
                        textArea.selectionStart += str.length;
                        textArea.focus();
                    } else if (document.selection) {
                        // IE浏览器
                        obj.focus();
                        var sel = document.selection.createRange();
                        sel.text = str;
                    }
                }

                changeSelectedText(textArea, this.faceList[index]);
                this.content = textArea.value; // 要同步data中的数据
                // console.log(this.faceList[index]);
                return;
            },
            // 保存日记
            updateDiary() {
                if (!this.checkForm()) {
                    this.$message.info('内容太少了哦~');
                    return
                }
                // this.$http.post("/diary", {uid: this.id, date: this.todayDate, title: this.title, content: this.content})
                this.$http.post("/diary", {
                    id: this.diaryId,
                    uid: this.tokenId,
                    date: this.todayDate,
                    title: this.title,
                    content: this.content
                }).then((res) => {
                    if (res.data.flag) {
                        this.$message.success(res.data.message);
                        this.getTodayDiary()
                        // this.resetForm();
                        // this.isWriteToday()
                    } else {
                        this.$message.error(res.data.message);
                    }
                }).catch((res) => {
                    this.$message.error(res);
                });
            },
            // 清空表单数据
            resetForm() {
                this.title = ''
                this.content = ''
            },
            formatDate(date) {
                console.log(date);
                date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
                console.log(date);
                var y = date.getFullYear();
                console.log(y);
                var m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            },
            // 检查表单数据
            checkForm() {
                return this.content.trim().length >= 3;
            },
            // 检查今天是否已经写过日记
            isWriteToday() {
                // this.$http.post("/diary/isWriteToday", {uid: this.id, date: this.todayDate})
                this.$http.post("/diary/isWriteToday", { uid: this.tokenId, date: this.todayDate})
                    .then((res) => {
                        // alert(res.data.flag)
                        this.isWrite = res.data.flag
                    }).catch((res) => {
                    this.$message.error(res);
                });
            },
            // 查找今天写的日记
            getTodayDiary() {
                this.$http.post("/diary/getTodayDiary/"+sessionStorage.getItem('token'), {uid: this.tokenId, date: this.todayDate})
                    .then((res) => {
                        console.log(res.data)
                        if (res.data.data) {
                            this.content = res.data.data.content;
                            this.title = res.data.data.title
                            this.diaryId = res.data.data.id
                            this.lastRecordTime = res.data.data.recordTime
                        }
                    }).catch((res) => {
                    this.$message.error(res);
                });
            },
            //从emoji.json录入表情
            enterEmoticons(count) {
                for (let i = 0; i < count; i++) {
                    this.faceList.push(appData[i].char);
                }
            }
        },
        created() {
            // 从emoji.json录入 140 个表情
            this.enterEmoticons(140)
            // this.isWriteToday();
            this.getTodayDiary();
        }
    }
</script>

<style scoped>
    .block {
        text-align: left;
        padding-left: 100px;
        padding-right: 100px;
    }

    /* 表情 */
    .chatIcon {
        padding: 0 10px;
        font-size: 25px;
    }

    .emotionList {
        display: flex;
        flex-wrap: wrap;
        padding: 5px;
    }

    .emotionItem {
        width: 10%;
        font-size: 20px;
        text-align: center;
    }

    /*包含以下四种的链接*/
    .emotionItem {
        text-decoration: none;
    }

    /*正常的未被访问过的链接*/
    .emotionItem:link {
        text-decoration: none;
    }

    /*已经访问过的链接*/
    .emotionItem:visited {
        text-decoration: none;
    }

    /*鼠标划过(停留)的链接*/
    .emotionItem:hover {
        text-decoration: none;
    }

    /* 正在点击的链接*/
    .emotionItem:active {
        text-decoration: none;
    }
</style>
